<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="favicon.ico" rel="shortcut icon" />
		<title>登录_信贷一站通</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
.area {margin: 20px auto 0px auto;}
.mui-input-group {margin-top: 15px;}
.mui-input-group:first-child {margin-top: 25px;}
.mui-input-group label {width: 27%;}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {width: 73%;}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {top: 6px;}
.mui-content-padded {margin-top: 25px;}
.mui-btn {padding: 10px;}
.link-area {display: block;margin-top: 25px;text-align: left;}
.spliter {color: #bbb;padding: 0px 8px;}
.oauth-area {position: absolute;bottom: 20px;left: 0px;text-align: center;width: 100%;padding: 0px;margin: 0px;}
.oauth-area .oauth-btn {display: inline-block;width: 50px;height: 50px;background-size: 30px 30px;background-position: center center;background-repeat: no-repeat;margin: 0px 20px;/*-webkit-filter: grayscale(100%); */
border: solid 1px #ddd;border-radius: 25px;}
.oauth-area .oauth-btn:active {border: solid 1px #aaa;}
.oauth-area .oauth-btn.disabled {background-color: #ddd;}
.mui-logn-logo{text-align: center;}
.mui-logn-logo img{width:40%;max-width: 14rem; margin: 2rem;}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content">
			<div class="mui-logn-logo">
				<img src="images/login-logo.png" />
			</div>
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>手机号</label>
					<input id='mobile' name="mobile" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='password' name="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button>
				<div class="link-area">
					<!-- <a id='reg'>注册账号</a> <span class="spliter">| -->
					</span> <a id='reg'>注册密码</a>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/frame-utils.min.js"></script>
		<script src="js/frame-setting.min.js?v=004"></script>
		<script>
            var token = localStorage.getItem("token");
            if (!isEmpty(token)) {
                openPage("Home", "index.html");
            }

			(function($, window, document, undefined) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
                document.getElementById('login').addEventListener('tap', function(event) {
					var url = serverUrl + loginApi;
					post(url, getFormJson("login-form"), function(rsp) {
						//console.log(rsp);
						if (!rsp.status) {
							$.alert(rsp.msg, '提示', function() {});
							return;
						}
						//token = rsp.token;
						localStorage.setItem("token", rsp.token);
						openPage("Home", "index.html", {
							"token": rsp.token
						});
					});
				}, false);

                document.getElementById('reg').addEventListener('tap', function(event) {
                    $.alert("功能暂未开放！", '提示', function() {});
                }, false);

				/* var qsa = function() {
					return [].slice.call(document.querySelectorAll.apply(document, arguments));
				};
				qsa("[_src]").forEach(function(item) {
					item.addEventListener('tap', function() {
						var url = this.getAttribute('_src');
						if (url) {
							plus.runtime.openURL(url);
						};
					}, false);
				}); */
			})(mui, window, document, undefined);
		</script>
	</body>

</html>
